<div
  #inputElement
  class="x-input"
  [class.x-flex]="justify || align || direction"
  [class.x-disabled]="disabled"
  [class.x-required]="requiredIsEmpty"
  [class.x-invalid]="invalid"
  [class.x-clearable]="clearable"
  [class.x-clear-show]="clearShow"
  [class.x-input-icon]="getIcon"
  [class.x-input-bordered]="bordered"
  [class.x-input-icon-left]="getIconLayoutLeft"
  [class.x-input-icon-right]="getIconLayoutRight"
  [class.x-input-after]="after"
  [class.x-input-before]="before"
  [class.x-input-after-template]="afterIsTemplate"
  [class.x-input-before-template]="beforeIsTemplate"
  [class.x-input-value-template]="valueTpl"
  [ngClass]="classMap"
>
  <label *ngIf="label" [style.width]="labelWidth" [ngClass]="labelMap">{{ label }}</label>
  <div class="x-input-row">
    <div class="x-input-row-before" *ngIf="before" [class.x-input-row-before-template]="beforeIsTemplate">
      <ng-container *xOutlet="before">{{ before }}</ng-container>
    </div>
    <div class="x-input-input" (mouseenter)="xMouseenter.emit($event)" (mouseleave)="xMouseleave.emit($event)">
      <div
        class="x-input-value-template-value"
        [style.padding-left.rem]="paddingLeft"
        [style.padding-right.rem]="paddingRight"
        *ngIf="valueTpl"
      >
        <ng-container *ngTemplateOutlet="valueTpl; context: valueTplContext ? valueTplContext : { $value: value }"></ng-container>
      </div>
      <input
        #inputRef
        [ngStyle]="inputStyle"
        [type]="type"
        [placeholder]="placeholder"
        [required]="required"
        [disabled]="disabled"
        [readonly]="readonly"
        [maxlength]="maxlength"
        [(ngModel)]="value"
        (ngModelChange)="change($event)"
        [style.padding-left.rem]="paddingLeft"
        [style.padding-right.rem]="paddingRight"
        (focus)="xFocus.emit($event)"
        (blur)="xBlur.emit($event)"
        (input)="xInput.emit($event)"
        (keydown)="xKeydown.emit($event)"
        (click)="xClick.emit($event)"
      />
      <x-icon *ngIf="clearShow" class="x-input-clear" type="fto-x" (click)="onClear()"></x-icon>
      <x-icon *ngIf="icon && ((!clearShow && getIconLayoutRight) || getIconLayoutLeft)" [type]="icon" [spin]="iconSpin"></x-icon>
      <span class="x-input-max-length" *ngIf="maxlength">{{ lengthTotal }}</span>
      <span class="x-input-error-message" *ngIf="invalid">{{ invalidMessage }}</span>
      <ng-container *ngIf="requiredIsEmpty || invalid">
        <div class="x-border-error x-top-left"></div>
        <div class="x-border-error x-top-right"></div>
        <div class="x-border-error x-bottom-left"></div>
        <div class="x-border-error x-bottom-right"></div>
      </ng-container>
    </div>
    <div class="x-input-row-after" *ngIf="after" [class.x-input-row-after-template]="afterIsTemplate">
      <ng-container *xOutlet="after">{{ after }}</ng-container>
    </div>
  </div>
</div>
